import React, { useState } from "react";
import Home from "../pages/Home";
import About from "../pages/About";
import Mine from "../pages/Mine";
import Detail from "../pages/Detail";
import Live from "../pages/Live";
import Manger from "../pages/Manger";
import {
  HashRouter as Router,
  Route,
  Redirect,
  Switch,
} from "react-router-dom";
import NotFound from "../pages/NotFound";
export default function Index() {
  let [list, setList] = useState([
    {
      path: "/",
      com: Home,
      exact: true,
    },
    {
      path: "/about",
      com: About,
    },
    {
      path: "/mine",
      com: Mine,
    },
    {
      path: "/detail/:id",
      com: Detail,
    },
    {
      path: "/live",
      com: Live,
    },
    {
      path: "/manager",
      com: Manger,
    },
  ]);
  return (
    <Router>
      <Switch>
        {list.map((item) => {
          return (
            <Route
              path={item.path}
              component={item.com}
              exact={item.exact}
            ></Route>
          );
        })}
        {/* <Route path="/" component={Home} exact></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/mine" component={Mine}></Route>
        <Route path="/detail/:id" component={Detail}></Route> */}
        <Route path="/404" component={NotFound}></Route>
        <Redirect path="*" to="/404"></Redirect>
      </Switch>
    </Router>
  );
}
